<template>
    <div class="head">
    <!-- 左上小图标 -->
        <div class="homeicon">
            <router-link to="/">
            <van-icon name="wap-home-o" />
            </router-link>
        </div>
        <!-- 中间标题 -->
        <div class="headmidle">
            {{title}}
        </div>
        <!-- 右上小图标 -->
        <div class="headright">
             <router-link to="/search">
                <van-icon name="search" />
             </router-link>
             <router-link to="/cart">
                <van-icon :badge="count" name="shopping-cart-o" />
             </router-link>
        </div>
    </div>
</template>

<script>
import { getShopCartList } from '@/axios/index'

export default {
  name:'headJump',
  props:['title'],
  data(){
    
    return {
      count: 0 // 购物车数量
    }
  },
  methods: {
    // 获取购物车数量
    async getCartCount(){
      // 获取购物车数量
      const res = await getShopCartList()
      this.count = res.data.length
    }
  },
  mounted(){
    this.getCartCount()
  }
}
</script>

<style lang="less">
    .van-info{
        top: 7px;
        right: 12px;
        width: 10px;
    }
</style>

<style lang='less' scoped>
    /* //头部 */
  .head{
      height: 1.3rem;
      display: flex;
      justify-content: space-between;
      font-size:0.8rem;
      line-height: 1.5rem;
      color: rgb(134, 134, 134);
      border-bottom: 1px solid rgb(180, 178, 178);
      background-color: rgb(255, 255, 255);
      .homeicon{
          margin-left: 0.2rem;
      }
      .headmidle{
          color: rgb(85, 85, 85);
          margin-left: 1rem;
          font-size: 0.5rem;
          font-weight: 900;
          font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
      }
      .headright{
           Letter-spacing:0.2rem 
      } 
  }
</style>